﻿<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>证件OCR</title>
		<link rel="stylesheet" type="text/css" href="../css/pop.css">
		<link rel="stylesheet" type="text/css" href="../css/normal.css">
		<link rel="stylesheet" type="text/css" href="../css/loading.css">
		<script type="text/javascript" src="../js/jquery.js"></script>	
		<script type="text/javascript" src="../js/detect.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/ocr.js"></script>
		<script type="text/javascript" src="../js/pop.js"></script>
		<script type="text/javascript" src="../js/json2.js"></script>
		
		<script type="text/javascript">
		function Init()
		{
			document.getElementById("fileText").value = "";
			document.getElementById("fileText2").value = "";
			var el = document.getElementById("cloudwalkwebobj");
			createPlugin(el);
		}
		</script>
		
	</head>
	<body onload="Init()"  style="background:rgba(0,0,0,0.15);filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#26000000,endcolorstr=#26000000);height:900px;">
	<input type="file" id="fileUpload" onchange="previewImage(this)"  style="display:none;"/> 
	<input type="file" id="fileUpload2" onchange="previewImage2(this)"  style="display:none;"/> 
		<div class="content" style="margin-top:70px">
			<div class="top1" >
				<div style="text-align:center; font:normal 36px 微软雅黑;">
					<span>请将身份证上传进行识别</span>
				</div>
			</div>
			<div class="ocr-top2" >
				<div class="ocr-top2-left" >
	
						<div id="preview" style="width:412px;height:261px;text-align:center;vertical-align:middle;display:inline-block;line-height:261px;">
						     <img alt="" src="../images/zhengmian.png" id="imghead" style = "max-height:261px;max-width:412px;vertical-align:middle;" />
						</div>
			
				</div>
				<div class="ocr-top2-right">
				
						<div id="preview2" style="width:412px;height:261px;text-align:center;vertical-align:middle;display:inline-block;line-height:261px;">
							<img alt="" src="../images/beimian.png" id="imghead2"  style = "max-height:261px;max-width:412px;vertical-align:middle;" />
						</div>
				
				</div>
			</div>
			<div class="ocr-top3" style="height:42px;">
				<div class="top3-left" style="height:42px;" >
					<form action="#" method="get" name="input1" >
               
						<input id="fileText" type="text"  readonly style="border:#CE4241 solid 1px;line-height:42px;height:30px;width:300px;margin-right:11px;vertical-align:middle;">
						<img id = "shangchuan1" alt="" src="../images/shangchuan.png" onclick="click_browseIDCardFilePathFront();" style="margin-right:11px;vertical-align:middle;cursor:pointer;">
						<img id = "xiangji1" alt="" src="../images/xiangji.png" onclick="showBg('imghead');" style="vertical-align:middle;margin-top:-3px;cursor:pointer;"/>
					</form>
                  
				</div>
				<div class="top3-right">
					<form action="#" method="get" name="input2">
						<input id="fileText2" type="text"  readonly style="border:#CE4241 solid 1px;line-height:42px;height:30px;width:300px;margin-right:11px;vertical-align:middle;" >
						<img id = "shangchuan2" alt="" src="../images/shangchuan.png" onclick="click_browseIDCardFilePathBack();"style="margin-right:11px;vertical-align:middle;cursor:pointer;">
						<img id = "xiangji2" alt="" src="../images/xiangji.png" onclick="showBg('imghead2');"style="vertical-align:middle;margin-top:-3px;cursor:pointer;"/>
					</form>
				</div>
			</div>
			<div class="ocr-top4">
				<div class="ocr-top4-left" style="position:relative;">
				
							<div  style="position:absolute;top:122px;left:50%;margin-left:-36px"><img id="question1" src="../images/question.png"/></div>
							<span id = "ocrFrontBtn" style="display:block;background-color: #CE4242;width:410px;height:40px;line-height:40px;color:white;font:normal 30px 微软雅黑;padding:11px 0;" ><span   onclick="click_IDCardOCRFront();"  style="cursor:pointer;" >点击识别</span></span>
							<span style="font:normal 20px 微软雅黑;padding:0px 0;display:block;"></span>
							<span id = "result" style="display:block;width:410px;height:89px;font:normal 20px 微软雅黑;margin-top:20px;color:#ce4242;"></span>
				
			
				</div>
				<div class="ocr-top4-right" style="position:relative;">
				
							<div  style="position:absolute;top:122px;left:50%;margin-left:-36px"><img id="question2" src="../images/question.png"/></div>
							<span id = "ocrBackBtn" style="display:block;background: #CE4242;width:410px;height:40px;line-height:40px;color:white;font:normal 30px 微软雅黑;padding:11px 0;" ><span onclick="click_IDCardOCRBack();" style="cursor:pointer;" >点击识别</span></span>
							<span style="font:normal 20px 微软雅黑;padding:0px 0;display:block;"></span>
							<span id = "result2" style="display:block;width:410px;height:89px;font:normal 20px 微软雅黑;;margin-top:20px;color:#ce4242;"></span>
					
			
				</div>
			</div>
		</div><!--content结束-->
		<div id="cloudwalkwebobj" style=" margin: 0 auto;" align="center"></div>

<!--弹出层开始-->
<div id="main">
	<div id="fullbg"></div> 
		<div id="dialog"> 
		<p class="close"><a href="#" onclick="closeBg();"></a></p> 
		<div id="cloudwalkwebobjadd" style=" margin: 0 auto;" align="center"></div>
		<div id="closeBtn" class="close_button"> <img src="../images/xiangjipaizhao.png"/ onclick="takePicture();"> </div> 
	</div> 
</div> 
<!--弹出层结束--> 
		<div id="over" class="over"></div>
		<div id="layout" class="layout"><img src="../images/loading.gif" /><p style="margin-left:2px;">身份证识别中...</p></div>
	</body>
</html>